<template>
  <div>
    <Header></Header>
    <div class="box">
      <div class="blogs">
        <ul class="blogs_ul" v-for="blog in blogList">
          <li class="blogs_list">
            <a >
              <i>
                <el-image
                  style="width: 100%; height: 100%"
                  :src="splitString(blog.coverImg)"
                  :preview-src-list="splitStringAll(blog.coverImg)">
                </el-image>
              </i>
              <h2>{{blog.title}}</h2>
            </a>
            <p >{{removeHtmlStyle(blog.introduction)}}</p>
            <div class="blogs_base">
              <span class="blogs_create_time">创建于{{blog.createTime}}</span>
              <span class="blogs_update_ime">更新于{{blog.updateTime}}</span>

            </div>
            <router-link :to="`/blog/detail/${blog.id}`">
              <a href="/" target="_blank" class="read_more">阅读更多</a>
            </router-link>
          </li>
        </ul>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getBlogList"
        />
      </div>

      <aside class="rbox">
        <div class="isgood_news">
          <h2 class="h_title">推荐</h2>
          <ul>
            <li><a href="/" title="" target="_blank"> <i><img src="@/assets/images/scenery/116351600_p0.png" alt=""></i><em>1</em>
              <p>一个32岁程序员的倔强——十年程序人生</p>
              <span class="star5"></span> </a></li>
            <li><a href="/" title="" target="_blank"> <i><img src="@/assets/images/scenery/116351600_p0.png" alt=""></i><em>2</em>
              <p>我是个女程序员，反正我就是来活跃气氛的</p>
              <span class="star4"></span> </a></li>
            <li><a href="/" title="" target="_blank"> <i><img src="@/assets/images/scenery/116351600_p0.png" alt=""></i><em>3</em>
              <p>安静地做一个爱设计的女子</p>
              <span class="star4"></span> </a></li>
            <li><a href="/" title="" target="_blank"> <i><img src="@/assets/images/scenery/116351600_p0.png" alt=""></i><em>4</em>
              <p>个人博客，属于我的小世界！</p>
              <span class="star3"></span> </a></li>
            <li><a href="/" title="" target="_blank"> <i><img src="@/assets/images/scenery/116351600_p0.png" alt=""></i><em>5</em>
              <p>一个32岁程序员的倔强——十年程序人生</p>
              <span class="star2"></span> </a></li>
            <li><a href="/" title="" target="_blank"> <i><img src="@/assets/images/scenery/116351600_p0.png" alt=""></i><em>6</em>
              <p>个人博客，属于我的小世界！</p>
              <span class="star2"></span> </a></li>
          </ul>
        </div>
        <div class="hot_news">
          <h2 class="h_title">人气点击</h2>
          <ol start="1">
            <li><a href="/" title="" target="_blank">
              <p>个人博客，属于我的小世界！</p>
            </a><span>900</span></li>
            <li><a href="/" title="" target="_blank">
              <p>我仅仅是一个“草根站长”</p>
            </a><span>798</span></li>
            <li><a href="/" title="" target="_blank">
              <p>世界上根本没有感同身受这回事</p>
            </a><span>765</span></li>
            <li><a href="/" title="" target="_blank">
              <p>兴趣支撑梦想，兴趣是支撑我自己前行的动力</p>
            </a><span>659</span></li>
            <li><a href="/" title="" target="_blank">
              <p>忙碌是自由活着的一种底气</p>
            </a><span>640</span></li>
            <li><a href="/" title="" target="_blank">
              <p>从互联网消失的那3年，都去哪儿了？</p>
            </a><span>503</span></li>
            <li><a href="/" title="" target="_blank">
              <p>7年，一个80后女站长与阿里云携手创业的真实故事</p>
            </a><span>500</span></li>
            <li><a href="/" title="" target="_blank">
              <p>【告别2018】耕耘才有所得，付出才有收获</p>
            </a><span>469</span></li>
            <li><a href="/" title="" target="_blank">
              <p>网易博客关闭，何不从此开始潇洒行走江湖！</p>
            </a><span>398</span></li>
            <li><a href="/" title="" target="_blank">
              <p>从互联网消失的那3年，都去哪儿了？</p>
            </a><span>503</span></li>
          </ol>
        </div>
        <div class="tagsclous">
          <h2 class="h_title">标签云</h2>
          <ul>
            <a href="/" target="_blank">女程序员</a> <a href="/" target="_blank">互联网</a> <a href="/" target="_blank">自由</a> <a href="/" target="_blank">底气</a> <a href="/" target="_blank">忙碌生活</a> <a href="/" target="_blank">建站流程</a> <a href="/" target="_blank">个人网站</a> <a href="/" target="_blank">建站初衷</a> <a href="/" target="_blank">个人博客</a> <a href="/" target="_blank">草根站长</a> <a href="/" target="_blank">618活动</a> <a href="/" target="_blank">心得</a> <a href="/" target="_blank">感受</a> <a href="/" target="_blank">直播</a> <a href="/" target="_blank">阿里云</a>
          </ul>
        </div>
      </aside>

    </div>
    <vueLive2d

    />
    <Footer></Footer>
  </div>
</template>


<script>
import { getBlogList} from "@/api/blog/blog";
import { css} from "@/assets/styles/blog.css";
import Header from '@/views/tool/build/Header.vue'
import Footer from '@/views/tool/build/Footer.vue'
// 在需要使用 Live2D 的组件中引入
import vueLive2d from 'vue-live2d'
// 时间转换
import moment from  "moment"
export default {
  components: { Footer, Header,vueLive2d },
  data() {
    return {
      // 总条数
      total: 0,
      queryParams:{
        pageNum: 1,
        pageSize: 10,
      },
      blogList:[],

    }
  },
  created() {
    this.getBlogList();

  },
  watch: {

  },
  mounted() {

  },
  methods: {
    /** 查询博客列表 */
    getBlogList() {
      this.loading = true;
      getBlogList(this.queryParams).then(response => {
        this.blogList = response.rows;
        this.total = response.total;
        this.loading = false;
        for (let i = 0; i <this.blogList.length ; i++) {
          this.blogList[i].createTime = moment(this.blogList[i].createTime).format("YYYY-MM-DD");
          this.blogList[i].updateTime = moment(this.blogList[i].updateTime).format("YYYY-MM-DD");
        }

      });
    },
    /**
     * 分割逗号
     */
    splitString(str) {
      let strArray = str.split(",");
      return "/dev-api"+strArray[0];
    },

    splitStringAll(str) {
      let strArray = str.split(",");
      for (let i = 0; i < strArray.length; i++) {
        strArray[i] = "/dev-api"+strArray[i];
      }
      return strArray;
    },


    removeHtmlStyle (html ) {
      let relStyle = /style\s*?=\s*?([‘"])[\s\S]*?\1/g;
      //去除样式
      let relTag = /<.+?>/g;
      //去除标签
      let relClass = /class\s*?=\s*?([‘"])[\s\S]*?\1/g;
      // 清除类名
      let newHtml = "";
      if (html) {
        newHtml = html.replace(relStyle, "");
        newHtml = newHtml.replace(relTag, '');
        newHtml = newHtml.replace(relClass, '');
      }
      return newHtml;
    },

  }
}
</script>

<style scoped lang="scss">
.blogs_list {
  overflow: hidden;
  position: relative;
  transition: all .8s;
  padding: 20px;
  background: #fff;
  margin-bottom: 20px;
  a{
    text-decoration: none;
    color: #001737;
  }


}

.blogs_list h2 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 10px 0;
  line-height: 28px;
  font-size: 20px;
}

.blogs_list h2:hover {
  color: #012684;
  text-decoration: none;
}

.blogs_list i {
  display: block;
  width: 210px;
  height: 158px;
  background: #ccc;
  overflow: hidden;
  float: left;
  margin-right: 20px;
  border-radius: 3px;
}
.blogs_list i img {
  width: 100%;
  min-height: 100%;
  transition: all .6s;
}
img {
  border: 0;
  display: block;
}

.blogs_base {
  color: #999;
  font-size: 14px;
  margin: 30px 0 0 0;
  line-height: 24px;
}
a.read_more {
  background: #012684;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  padding: 8px 20px;
  border-radius: 4px;
  width: 100px;
  float: right;
}



.blogs {
  width: 70%;
  float: left;
}
.box {
  font: 15px "Microsoft YaHei", Arial, Helvetica, sans-serif;
  background: #f3f8fb;
  color: #001737;
  width: 1200px;
  margin: auto;
}
span.blogs_time {
  background: url(../../assets/icons/icon_time.png) no-repeat left center;
  background-size: 20px;
}

span.blogs_onclick {
  background: url(../../assets/icons/icon_fire.png) no-repeat left center;
  background-size: 20px;
}

.blogs_base span {
  margin-right: 20px;
  padding-left: 24px;
  line-height: 24px;
  display: block;
  float: left;
}


.content {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
</style>
